<template>
	<view class="bolg-info-page">
		<!-- 导航栏 -->
		<van-nav-bar title="个人博客" left-text="返回" left-arrow @click-left="Back" />
		<!-- 博客内容区域 -->
		<view class="bolg-wrap">
			<!-- 博客标题 -->
			<h2>{{bolg.bolg.bolgTitle}}</h2>
			<!-- 作者信息 -->
			<view class="bolg-top">
				<view>
					<image :src="bolg.user.photo" mode="widthFix"></image>
					<text>{{bolg.user.username}}</text>
				</view>
				<van-button size="small" round icon="plus" plain color="#F92672" @click="onFocus">关注</van-button>
			</view>
			<!-- 博客信息 -->
			<view class="publish">
				<text>{{bolg.bolg.pubTime}}</text> ·
				<text>浏览 {{bolg.bolg.bolgWatch}}</text> ·
				<text class="original"> 原创</text>
			</view>
			<!-- 博客文章区域 -->
			<view class="bolg-article">
				<view>
					<text>{{bolg.bolg.bolgArticle}}</text>
					<img :src="bolg.bolg.imgs">
				</view>
				<p class="alert">本文由用户自行发布，如有侵权请练习摩托帝</p>
			</view>
		</view>

		<!-- 底部功能区 -->
		<view class="bolg-bottom">
			<!-- 点赞收藏 -->
			<view class="bolg-bottom-left">
				<van-icon class=" bottom-item-left" name="good-job" size="50rpx"
					@click="updateColor(1,bolg.bolg.bolgId)" />
				<van-icon name="star" size="50rpx" @click="updateColor(0,bolg.bolg.bolgId)" />
			</view>
			<!-- 分享朋友 -->
			<view class="bolg-bottom-right">
				<van-button class=" bottom-item-left" icon="wechat" plain round type="success" size="small"
					@click="showShare = true">好友</van-button>
				<van-button icon="plus" plain round type="primary" size="small" @click="copy">复制口令</van-button>
			</view>
			<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		showToast
	} from 'vant'

	//  封装的api
	import $api from '../../request/index.js'

	let showShare = ref(false)
	const options = [{
			name: '微信',
			icon: 'wechat'
		},
		{
			name: '微博',
			icon: 'weibo'
		},
		{
			name: '复制链接',
			icon: 'link'
		},
		{
			name: '分享海报',
			icon: 'poster'
		},
		{
			name: '二维码',
			icon: 'qrcode'
		},
	];

	const onSelect = (option) => {
		showToast(option.name);
		showShare.value = false;
	};

	let bolg = ref({
		"bolg": {
			"bolgId": 0,
			"bolgTitle": "",
			"bolgWatch": '',
			"bolgAuthor": "",
			"imgs": "",
			"bolgArticle": "",
			"pubTime": "",
			"bolgSortId": 0,
			"likess": 0,
			"collect": 0,
			"isDelete": 0,
			"uid": 0
		},
		"user": {
			"id": null,
			"password": null,
			"phone": null,
			"username": "",
			"nickname": null,
			"photo": "",
			"sex": null,
			"age": null,
			"ident": null,
			"address": null,
			"ban": null,
			"isDelete": null
		},
		"favorite": 0
	})


	// 拿到id -> 拿到详情 -> 赋值变量 -> 渲染页面
	onLoad(payload => {
		$api.get('/moto/bolg/article/' + payload.id).then(res => bolg.value = res.data)
		$api.put('/moto/bolg/incrementViews/' + payload.id)
	})


	// 收藏
	const onFocus = () => {
		uni.showToast({
			icon: 'success',
			title: '关注成功'
		})
	}



	const copy = () => showToast('复制成功')

	// 点赞 和 点击
	const updateColor = (type, id) => {
		let icon = type ? 'good-job-o' : 'star-o'

		let url = type ? '	/moto/bolg/likess/' + id : '/moto/bolg/collect'
		let data = type ? null : {
			"bolgId": id,
			"bolgState": 1
		}

		console.log(bolg)
		$api.post(url, data).then(res => {
			console.log(res)
			let msg = type ? res.data : res.msg
			showToast({
				message: msg,
				icon: icon,
			})
		})



	}

	// 返回按钮
	const Back = () => uni.navigateBack()
</script>

<style>
	.bolg-wrap {
		height: calc(100vh - 96px);
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.bolg-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}

	.bolg-top>view {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.bolg-top image {
		width: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.publish {
		font-size: 12px;
		color: #909090;
		padding: 10rpx 0;
	}

	.original {
		color: #0194FC;
		border: 1px solid #0194FC;
		border-radius: 3px;
	}

	.bolg-article img {
		width: 100%;
		margin: 20rpx 0;
	}

	.alert {
		font-size: 14px;
		color: #999999;
	}

	.bolg-bottom {
		height: 50px;
		box-sizing: border-box;
		padding: 0 20rpx;
		border-top: 2px solid #F9FAFA;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom-item-left {
		margin-right: 20rpx;
	}
</style>